<template>
    <div class="content">
        <h2>热门精选</h2>
        <div class="list">
            <template v-for="(item,index) in houseList">
                <house-type3 v-if="item.discoveryContentType === 3"
                             :house-data="item.data" @click="houseClick(item.data)"></house-type3>
                <house-type9 v-if="item.discoveryContentType === 9"
                             :house-data="item.data" @click="houseClick(item.data)"></house-type9>
            </template>
        </div>
    </div>
</template>

<script setup>
import useHomeStore from '@/store/modules/home';
import { storeToRefs } from 'pinia';
import houseType3 from "@/components/house-type/house-type-3.vue"
import houseType9 from "@/components/house-type/house-type-9.vue"
import { useRouter } from "vue-router"

const homeStore = useHomeStore()
homeStore.fetchHouseListAction()
const { houseList } = storeToRefs(homeStore)

const router = useRouter()
function houseClick(item) {
    router.push(`/detail/${item.houseId}`)
} 

</script>


<style lang='less' scoped>
    .list {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
        padding: 12px;
    }
</style>